import React from 'react';
import { Card, Form, Input, Breadcrumb, Space } from 'antd'
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { add } from '../../utils/api2';
import * as echarts from 'echarts';
import '../../style/detail.scss'
function Details(props) {
    var { id } = useParams()
    useEffect(() => {
        setTimeout(() => {
            var myChart = echarts.init(document.getElementById('bar'));
            // var option;
            // 饼图数据
            let option = {
                title: {
                    text: '通知阅读情况',
                    // subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    left: '36%',
                    top: '85%'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: '已读人数' },
                            { value: 300, name: '未读人数' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
        }, 1)
        axios.get(`/posts/${id}`).then((res) => {
            console.log(res.data.name)
            form.setFieldsValue(res.data)
            form.setFieldsValue({ 'name': res.data.name })
        })
    }, [])
    const [form] = Form.useForm()
    const { TextArea } = Input

    return (
        <div>
            <Breadcrumb className='yiqing'>
                <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
                <Breadcrumb.Item href='/index/outbreak'>疫情通告</Breadcrumb.Item>
                <Breadcrumb.Item>通告详情</Breadcrumb.Item>
            </Breadcrumb>
            <Card>
                <div className="content">
                    <Form
                        form={form}
                        disabled
                    >
                        <Form.Item
                            name="name"
                            label="主题"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="context"
                            label="通知"
                        >
                            <TextArea autoSize={{ minRows: 4, maxRows: 10 }} />
                        </Form.Item>
                        <Form.Item
                            name="people"
                            label="发布者"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="time"
                            label="时间"
                        >
                            <Input />
                        </Form.Item>
                    </Form>
                    <div id="bar" ></div>
                </div>

            </Card>
        </div>
    );
}
export default Details;